<template>
  <div>
    <el-form label-width="120px" :model="formData">
      <el-form-item label="节点文本text">
        <el-input v-model="formData.text"></el-input>
      </el-form-item>
      <el-form-item label="通知书名称name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="部门区域region">
        <el-input v-model="formData.region"></el-input>
      </el-form-item>
      <el-form-item label="案件类型type">
        <el-input v-model="formData.type"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" @click="addAttribute">添加属性</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="dialogVis"
      title="添加属性"
    >
      <el-form 
        :model="formDataDialog"
        label-width="80px"
      >
        <el-form-item label="key">
          <el-input v-model="formDataDialog.key"></el-input>
        </el-form-item>
        <el-form-item label="value">
          <el-input v-model="formDataDialog.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitDialog">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script setup name="CommonProperty">
import { onMounted, ref } from 'vue';

const props = defineProps({
  nodeData: {
    type: Object,
    default: ()=>{}
  },
  lf: Object || String
})

const emits = defineEmits(['onClose'])

const textNew = ref('')
const formData = ref({})

onMounted(()=>{
    const { properties, text } = props.nodeData
    if (properties) {
      // 3个参数, 第一个参数是{}, 作用: 两个或多个对象的属性合并到一起，不改变原有对象的属性
      formData.value = Object.assign({}, formData.value, properties)
    }
    if (text && text.value) {
      formData.value.text = text.value
    }
    if (text && text.value) {
      textNew.value = text.value
    }
})

const onSubmit = () => {
  const { id } = props.nodeData
  props.lf.setProperties(id, {
    ...formData.value
  });
  console.log(6666, formData.value);
  props.lf.updateText(id, formData.value.text);
  emits('onClose')
}


//#region 添加属性
const formDataDialog = ref({})

const dialogVis = ref(false)

const addAttribute = () => {
  dialogVis.value = true
}

const objArr = []

const onSubmitDialog = () => {
  debugger
  const { id } = props.nodeData
  let obj = {}
  obj[formDataDialog.value.key] = formDataDialog.value.value

  objArr.push(obj)
  console.log('objArr',objArr)

  formData.value = Object.assign({}, formData.value, obj)

  props.lf.setProperties(id, {
    ...formData.value
  });
  console.log('formData.value', formData.value);

  props.lf.updateText(id, formData.value.text);

  dialogVis.value = false
}
//#endregion

</script>
<style scoped>
</style>
